<template>
  <div>
    <TableSearch
      :query="queryData"
      :options="searchOpt"
      :search="handleSearch"
    />
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="tableData"
        :total="page.total"
        :currentPage="queryData.pageNum"
        :delFunc="handleDelete"
        :page-change="changePage"
        @refresh="refresh"
        @changePage="changePage"
        :editFunc="handleEdit"
      >
        <template #toolbarBtn>
          <el-button
            type="warning"
            :icon="CirclePlusFilled"
            @click="handleEdit('add')"
            >新增</el-button
          >
        </template>
      </TableCustom>
    </div>
    <!-- <el-dialog
      title="查看详情"
      v-model="visible1"
      width="700px"
      destroy-on-close
    >
      <TableDetail :data="viewData"></TableDetail>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive, provide } from "vue";
import { ElMessage } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { User } from "@/types/user";
import { useRouter } from "vue-router";
import { gmtScriptinfopage, gmtScriptInfoRemove } from "@/api/gmtScript";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import TableSearch from "@/components/table-search.vue";
import { FormOption, FormOptionList } from "@/types/form-option";

const router = useRouter();
// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "脚本名称", prop: "scriptName" },
]);
const handleSearch = (e) => {
  changeTable();
};

const queryData = ref({
  pageNum: 1,
  pageSize: 10,
  orderBy: {},
  conditions: [
    {
      column: "scriptName",
      type: "like",
      value: "",
    },
  ],
  asc: true,
});

// 表格相关
let columns = ref([
  {
    type: "index",
    label: "序号",
    width: 55,
    showOverflowTooltip: true,
    align: "center",
  },
  { prop: "scriptId", showOverflowTooltip: true, label: "脚本ID" },
  { prop: "scriptName", showOverflowTooltip: true, label: "脚本名称" },
  { prop: "scriptDes", showOverflowTooltip: true, label: "脚本描述" },
  { prop: "createTime", showOverflowTooltip: true, label: "创建时间" },
  { prop: "operator", label: "操作", width: 250 },
]);
const page = reactive({
  index: 1,
  size: 10,
  total: 0,
});
const tableData = ref<User[]>([]);
const getData = async () => {
  const res: any = await gmtScriptinfopage(queryData.value);
  console.log("res", res);

  tableData.value = res.records;
  page.total = res.total;
};
getData();

const changePage = (val: number) => {
  console.log("val", val);

  queryData.value.pageNum = val;
  getData();
};

const changeTable = () => {
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: "100px",
  span: 12,
  list: [
    { type: "input", label: "用户名", prop: "name", required: true },
    { type: "input", label: "手机号", prop: "phone", required: true },
    { type: "input", label: "密码", prop: "password", required: true },
    { type: "input", label: "邮箱", prop: "email", required: true },
    { type: "input", label: "角色", prop: "role", required: true },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row) => {
  console.log("row", row);
  router.push({
    name: "GMT-script-edit",
    params: { id: row != "add" ? row.scriptId : "add" },
  });
};

provide("sendtemplate", (childId: string, childName: string) => {
  console.log("123456");
});

const updateData = () => {
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: [],
});

const refresh = () => {
  getData();
};

// 删除相关
const handleDelete = async (row: any) => {
  await gmtScriptInfoRemove([row.scriptId]);
  ElMessage.success("删除成功");
  getData();
};
</script>

<style scoped></style>
